import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_network/old/url_config.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_validate.dart';
import 'package:gameplay_flutter/lib_runtime/extension/widget/widget_wrapper.dart';
import 'package:gameplay_flutter/lib_runtime/web_url_const.dart';
import 'package:gameplay_flutter/m_login/select_country/select_country_page.dart';

import '../../lib_basemodel/country/country_model.dart';
import '../../lib_baseview/lib_baseview.dart';
import '../../lib_baseview/theme/jr.dart';
import '../../lib_baseview/utils/constant/app_colors.dart';
import '../../lib_baseview/widget/appbar/custom_app_bar.dart';
import '../../lib_baseview/widget/button/jr_loading_button.dart';
import '../../lib_baseview/widget/web/common_web_view.dart';
import '../../resource/language/generated/l10n.dart';
import 'login_with_phone_controller.dart';

class LoginWithPhonePage extends StatefulWidget {
  const LoginWithPhonePage({super.key});

  @override
  State<LoginWithPhonePage> createState() => _LoginWithPhonePageState();
}

class _LoginWithPhonePageState extends State<LoginWithPhonePage> {
  final LoginWithPhoneController _ctrl = Get.put(LoginWithPhoneController());

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: [
          image(
            'login/login_with_phone_bg.png',
            width: ScreenUtil().screenWidth,
            height: 184.h,
            fit: BoxFit.fitWidth,
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: CustomAppBar(),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                T.current.login_for_sms.text(
                    color: AppColors.COLOR_1B1B1B,
                    fontSize: 24,
                    weight: TextFontWeight.medium),
                SizedBox(
                  height: 8.h,
                ),
                T.current.login_sms_tips.text(
                    color: AppColors.COLOR_A8A8A8,
                    fontSize: 12,
                    weight: TextFontWeight.regular,
                    maxLines: 2,
                    maxWidth: ScreenUtil().screenWidth - 20 * 2),
                inputWidget().padding(top: 30),
                bottomWidget().padding(top: 27),
              ],
            ).paddingSymmetric(horizontal: 20.w),
          )
        ],
      ),
    ).onTap(() {
      // print("cdddddd");

      // _ctrl.focusNode.
      FocusScope.of(context).unfocus();
    });
  }

  Widget inputWidget() {
    return Container(
      // color: Colors.black,
      child: Row(
        children: [
          areaCodeWidget,
          Container()
              .sized(width: 0.5.w)
              // .colorBg(bgColor: const Color(0xffD5D0E0))
              .colorBg(bgColor: const Color(0xFFFAFAFA))
              .paddingSymmetric(vertical: 5.h)
              .padding(start: 3.w),
          Expanded(
            child: GetBuilder<LoginWithPhoneController>(
              // id: 'login_sms_get_veri',
              builder: (controller) {
                return TextField(
                  focusNode: _ctrl.focusNode,
                  controller: _ctrl.textController,
                  autofocus: false,
                  cursorColor: JR.color.cursorColor,
                  inputFormatters: [
                    FilteringTextInputFormatter.digitsOnly, // 只允许数字
                    TextInputFormatter.withFunction((oldValue, newValue) {
                      final oldLen = oldValue.text.calcLength();
                      final newLen = newValue.text.calcLength();
                      if (newLen > oldLen && newLen > 11) {
                        return oldValue;
                      }
                      return newValue;
                    })
                  ],
                  onChanged: (value) {
                    _ctrl.updataLoginSmsGetVeri(value);
                    setState(() {});
                    // updataLoginSmsGetVeri
                  },
                  style: TextStyle(
                    color: const Color(0xFF948AAD),
                    fontSize: 15,
                    fontFamily: TextFontFamily.harmonyOS.family,
                    fontWeight: TextFontWeight.regular.toFontWeight,
                  ),
                  // textInputAction: TextInputAction.search,
                  onSubmitted: (_) {
                    if (_ctrl.textController.text.trim().isNotEmpty) {
                      ///
                      setState(() {});
                    }
                  },
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(23),
                      borderSide: const BorderSide(
                        width: 0,
                        style: BorderStyle.none,
                      ),
                    ),
                    suffixIcon: _ctrl.textController.text.isNotEmpty
                        ? Container(
                            alignment: Alignment.center,
                            margin: EdgeInsets.zero,
                            // color: Colors.red,
                            width: 20.w,
                            height: 20.w,
                            child: JR.img(
                              'common/common_close_icon.png',
                              width: 20.w,
                              height: 20.w,
                            ),
                          ).onTap(() {
                            _ctrl.textController.text = "";
                            _ctrl.updataLoginSmsGetVeri(
                                _ctrl.textController.text);
                            setState(() {});
                          })
                        : null,
                    contentPadding: EdgeInsets.zero,
                    hintStyle: TextStyle(
                      color: const Color(0xFF948AAD),
                      fontSize: 15,
                      fontFamily: TextFontFamily.harmonyOS.family,
                      fontWeight: TextFontWeight.regular.toFontWeight,
                    ),
                    fillColor: Colors.transparent,
                    filled: true,
                    hintText: T.current.login_sms_phone,
                  ),
                ).padding(start: 7.w);
              },
            ),
          ),
        ],
      ),
    )
        .colorBg(bgColor: const Color(0xFFF3EEFF))
        .sized(height: 42.h, width: ScreenUtil().screenWidth - 50 * 2)
        .corner(radius: 21.h)
        .center();
  }

  /// 区号视图
  Widget get areaCodeWidget {
    return Container(
      child: Row(
        children: [
          GetBuilder<LoginWithPhoneController>(
            id: 'country_code',
            builder: (controller) {
              return "+${(_ctrl.countryModel?.code ?? '')}"
                  .text(
                      color: AppColors.COLOR_1B1B1B,
                      fontSize: 16,
                      weight: TextFontWeight.regular)
                  .padding(start: 15.w);
            },
          ),
          JR.img('login/login_phone_num_icon.png', width: 12.w, height: 12.w),
        ],
      ).onTap(() {
        Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
          return SelectCountryPage(
            onCountrySelected: (CountryModel? selectedCountry) {
              if (selectedCountry != null) {
                _ctrl.countryModel = selectedCountry;
              }
            },
          );
        }));
      }),
    );
  }

  /// 底部按钮
  Widget bottomWidget() {
    return Container(
      // color: Colors.red,
      width: ScreenUtil().screenWidth,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GetBuilder<LoginWithPhoneController>(
            id: 'login_sms_get_veri',
            builder: (controller) {
              return JRLoadingButton(
                controller.isLoading.value,
                T.current.login_sms_get_veri,
                callback: controller.fetchVerify,
                width: ScreenUtil().screenWidth - 50 * 2,
                highlight: controller.isHeight.value,
              ).corner(radius: 20);
            },
          ),
          T.current.login_problems
              .text(color: AppColors.COLOR_8A72FE, fontSize: 10)
              .paddingAll(5.w)
              .onTap(() {
            String url =
                '${UrlConfig.pageDomain}${WebUrlConst.encounteringProblems.path}';

            // print('url:${url}');

            CommonWebView.show(context, url, title: 'baidu');
          }).padding(top: 11),
        ],
      ),
    );
  }
}
